<template>
  <div class="ai-empowerment">
    <div class="container">
      <div class="ai-content-wrapper">
        <!-- 左侧内容 -->
        <div class="ai-left-content">
          <h3 class="ai-title">AI 赋能时代<br><span class="highlight-text">排版与管理</span>双升级!</h3>
          <p class="ai-description">智能助手一键托管<br>解锁AI，启幕 AI 驱动的排版创作新篇</p>
          <button class="carousel-btn">立即解锁 -→</button>
        </div>
        
        <!-- 右侧内容 -->
        <div class="ai-right-content">
          <!-- <div class="search-section">
            <label for="ai-search">您的需求：</label>
            <input type="text" id="ai-search" placeholder="AI排版" class="ai-search-input">
            <button class="search-button">搜索</button>
          </div>
          
          <div class="layout-options">
            <div class="layout-option">
              <div class="layout-preview">
                <div class="preview-item image-placeholder"></div>
                <div class="preview-item text-placeholder"></div>
                <div class="preview-item text-placeholder"></div>
                <div class="preview-item text-placeholder"></div>
              </div>
              <button class="use-button">使用</button>
            </div>
            
            <div class="layout-option">
              <div class="layout-preview">
                <div class="preview-item image-placeholder small"></div>
                <div class="preview-item text-placeholder"></div>
                <div class="preview-item text-placeholder"></div>
                <div class="preview-item image-placeholder small"></div>
              </div>
              <button class="use-button">使用</button>
            </div> -->
          </div>
        </div>
      
      <!-- 装饰元素 -->
      <!-- <div class="decoration-elements">
        <div class="decoration-item ai-letter">A</div>
        <div class="decoration-item image-preview"></div>
        <div class="decoration-item ai-icons">
          <div class="icon-item chat-icon"></div>
          <div class="icon-item ai-icon"></div>
          <div class="icon-item document-icon"></div>
        </div>
      </div> -->
    </div>
</div>
</template>

<script>
export default {
  name: 'AdvantageSection'
}
</script>

<style scoped>
/* 基础样式 */
.ai-empowerment {
  background-image: url('@/assets/home/AI_back2.png');
  position: relative;
  padding: 300px 0;
  margin-top: 60px;
  background-color: #f8faff;
  overflow: hidden;
  background-repeat: no-repeat;
  background-size: 100%;
  position: relative;
  background-position-y: -34px;
}

.container {
    
  width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
  position: relative;
  z-index: 1;
}

.section-main-title {
  position: absolute;
  top: -300px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 24px;
  font-weight: bold;
  color: #333;
  opacity: 0.8;
}

/* 主内容布局 */
.ai-content-wrapper {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.ai-left-content {
  flex: 1;
  padding-right: 40px;
  margin-top: -100px;
}

.ai-right-content {
  flex: 1;
  /* background-color: #fff;
  border-radius: 16px;
  padding: 30px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05); */
}

/* 左侧内容样式 */
.ai-title {
  font-size: 32px;
  font-weight: bold;
  color: #333;
  line-height: 1.3;
  margin-bottom: 20px;
}

.highlight-text {
  color: #409eff;
}

.ai-description {
  font-size: 16px;
  color: #666;
  line-height: 1.8;
  margin-bottom: 30px;
}

.unlock-button {
  background-color: #409eff;
  color: white;
  border: none;
  padding: 12px 30px;
  font-size: 16px;
  font-weight: bold;
  border-radius: 30px;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

.unlock-button:hover {
  background-color: #3a8ee6;
}

/* 右侧内容样式 */
.search-section {
  display: flex;
  align-items: center;
  margin-bottom: 30px;
}

.search-section label {
  font-size: 14px;
  color: #333;
  margin-right: 10px;
}

.ai-search-input {
  flex: 1;
  padding: 8px 15px;
  border: 1px solid #dcdfe6;
  border-radius: 4px 0 0 4px;
  font-size: 14px;
}

.search-button {
  background-color: #909399;
  color: white;
  border: none;
  padding: 8px 20px;
  font-size: 14px;
  border-radius: 0 4px 4px 0;
  cursor: pointer;
}

.layout-options {
  display: flex;
  justify-content: space-between;
  gap: 20px;
}

.layout-option {
  flex: 1;
  border: 1px solid #ebeef5;
  border-radius: 8px;
  padding: 15px;
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
}

.layout-preview {
  width: 100%;
  min-height: 180px;
  border: 1px dashed #dcdfe6;
  border-radius: 4px;
  padding: 15px;
  margin-bottom: 15px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.preview-item {
  background-color: #f5f7fa;
  border-radius: 4px;
}

.image-placeholder {
  height: 80px;
  width: 100px;
  align-self: center;
}

.image-placeholder.small {
  height: 60px;
  width: 80px;
}

.text-placeholder {
  height: 20px;
  width: 100%;
}

.use-button {
  background-color: #fff;
  color: #409eff;
  border: 1px solid #409eff;
  padding: 6px 15px;
  font-size: 12px;
  border-radius: 15px;
  cursor: pointer;
}

/* 装饰元素 */
.decoration-elements {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.decoration-item {
  position: absolute;
  opacity: 0.1;
}

.ai-letter {
  top: 20px;
  left: 50px;
  font-size: 200px;
  font-weight: bold;
  color: #409eff;
}

.image-preview {
  bottom: 30px;
  left: 100px;
  width: 150px;
  height: 100px;
  border-radius: 8px;
  background-color: #409eff;
}

.ai-icons {
  bottom: 40px;
  right: 100px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.icon-item {
  width: 60px;
  height: 60px;
  border-radius: 10px;
  background-color: #409eff;
}

/* 响应式设计 */
@media (max-width: 992px) {
  .container {
    width: 100%;
  }
  
  .ai-content-wrapper {
    flex-direction: column;
    text-align: center;
  }
  
  .ai-left-content {
    padding-right: 0;
    margin-bottom: 30px;
  }
  
  .layout-options {
    flex-direction: column;
  }
}
</style>